<template>
  <div class="banner_form">
    <div class="flex flex-between-center header">
      <span
        class="color-666"
        v-if="type==='bannerCol'"
      >轮播图{{itemIndex+1}}</span>
      <span
        class="color-666"
        v-else-if="type==='categoryForm'"
      >
        一级推荐商品
      </span>
      <span
        class="color-666"
        v-else
      >图片{{itemIndex+1}}</span>
      <p
        class="tools"
        v-if="showTool"
      >
        <span
          class="pointer"
          @click="$emit('upSortItem')"
        ><i class="el-icon-top"></i></span>
        <span
          class="pointer"
          @click="$emit('downSortItem')"
        ><i class="el-icon-bottom"></i></span>
        <span
          class="pointer"
          @click="$emit('deleteItem')"
        ><i class="el-icon-delete"></i></span>
      </p>
    </div>
    <crop-upload
      v-if="type==='categoryForm'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="121px"
      :img-width="650"
      :min-height="220"
      :photo-width="359"
      :photo-height="121"
      @setVal="(val)=>{formData.img=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='topBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="248px"
      :img-width="750"
      :min-height="520"
      :photo-width="359"
      :photo-height="248"
      @setVal="(val)=>{formData.img=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='capsuleBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="88px"
      :img-width="690"
      :img-height="170"
      :photo-width="359"
      :photo-height="88"
      @setVal="(val)=>{formData.img=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='bannerCol'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="170px"
      wrapper-height="253px"
      :img-width="335"
      :img-height="500"
      :photo-width="170"
      :photo-height="253"
      @setVal="(val)=>{formData.img=val}"
    ></crop-upload>
    <crop-upload
      v-if="type==='secBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="88px"
      :img-width="690"
      :img-height="170"
      :photo-width="359"
      :photo-height="88"
      @setVal="(val)=>{formData.img=val}"
    ></crop-upload>
    <div
      v-if="formData.jumpType&&formData.jumpUrl"
      class="flex align-center link_val"
    >
      <span class="type">{{formData.jumpType==1?'文本链接':'商品链接'}}</span>
      <el-tooltip
        v-if="type==='bannerCol'||linkVal.length>20"
        class="item"
        effect="dark"
        :content="linkVal"
        placement="top-start"
      >
        <p class="flex-1 text-ellipsis">{{linkVal}}</p>
      </el-tooltip>
      <p
        class="flex-1 text-ellipsis"
        v-else
      >{{linkVal}}</p>
      <span
        class="color-999 pointer"
        @click="deleteLink"
      ><i class="el-icon-error"></i></span>
    </div>
    <div
      v-else
      class="add-div"
      @click="addLink"
    >
      <i class="el-icon-link"></i>添加链接
    </div>
    <link-dialog
      ref="linkDialog"
      @setVal="setVal"
    ></link-dialog>
  </div>
</template>

<script>
import cropUpload from "@/components/cropUpload";
import linkDialog from "./linkDialog";
export default {
  components: { cropUpload, linkDialog },
  props: {
    itemIndex: {
      type: Number
    },
    showTool: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: {}
    },
    type: {
      type: String
    }
  },
  computed: {
    linkVal() {
      return this.formData.jumpType == 1 ? this.formData.jumpUrl : this.formData.goods.title;
    }
  },
  data() {
    return {}
  },
  methods: {
    deleteLink() {
      this.formData.jumpUrl = '';
      this.formData.goods = {};
    },
    setVal({ jumpType, jumpUrl, goods }) {
      this.formData.jumpType = jumpType;
      this.formData.jumpUrl = jumpUrl;
      this.formData.goods = jumpType == 2 ? goods : {};
    },
    addLink() {
      this.$refs.linkDialog.dialogVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  span {
    margin-left: 10px;
    color: #666666;
  }
}
.banner_img {
  margin: 10px 0 15px;
  text-align: center;
}
.link_val {
  height: 30px;
  padding: 8px;
  border: 1px solid #eeeeee;
  .type {
    padding-right: 8px;
    border-right: 1px solid #eeeeee;
  }
  p {
    padding: 0 8px;
  }
}
</style>
